<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>公海</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
		<script type="text/javascript" src="../js/qs.js"></script>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/iview/dist/iview.min.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
		<style scoped>
			/* 在此定义当前页面css */
			@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
			@import url("//unpkg.com/iview/dist/styles/iview.css");
		</style>
		<style type="text/css">
			p{
				color: #797979;
				font-size: 15px;
			}
			.el-button{
				font-size: 15px;
				float: right;
			}
			.el-input{
				width:200px;
			}
		</style>
	</head>
	<body>
		<div id="app">
		<p>创建日期：2019-02-22   公海客户：共{{pagedata.total}}个；已分配0个/未分配{{pagedata.total}}个；   领用上限个200/已领{{pagedata.total}}个</p>
		<p>公海部门：销售部,客户部,仓储部,维修部,售后部,产品部,管理部</p>
		<p>公海管理：rose,mike,joe,susan,lisa,zxx,www,saed</p>
		<br />
				
		<div style="margin-top: 15px;">
				<div class="block">
					<!-- <template>
				   <el-select v-model="value7" placeholder="请选择" @change="getValue">
					<el-option-group v-for="group in options3" :key="group.label" :label="group.label">
					  <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-option-group>
				  </el-select>
					</template> -->
					
					<el-input clearable placeholder="请输入内容" style="width:50%" v-model="input5" class="input-with-select">
						<el-button slot="append" icon="el-icon-search" @click="inputCustname">所有者姓名</el-button>
						</el-input>
			</div>
		</div>
		<div>
			<el-button type="primary" icon="el-icon-setting" @click="HighSeasParameter">公海参数</el-button>
		</div>
		<br />
		
		<!-- 公海参数 -->
		<el-dialog title="公海设置" :visible.sync="dialogFormVisible">
			<el-form :model="ruleForm" :rules="rules1" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-row>
					<el-col :span="24">
						<el-form-item label="公海名称" prop="iwName">
							<el-input v-model="ruleForm.iwName"></el-input>
						</el-form-item>
						<!-- </div> -->
					</el-col>
				</el-row>
				
				<p>公海客户目标未达成时,自动回归期限</p>
				<el-row>
					<el-col :span="24">
						<el-form-item label="①" prop="iwBack">
							<el-input v-model="ruleForm.iwBack"></el-input>
							<span>天内没有新建回款且没有新建合同订单</span>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="24">
						<el-form-item label="②" prop="iwHistory">
							<el-input @blur="compare" v-model="ruleForm.iwHistory" clearable ></el-input>
							<span>天内没有行动历史(无跟踪)</span>
						</el-form-item>
					</el-col>
				</el-row>
				<p>说明：1.①必须大于②；2.②必须设置</p>
				<br/>
				
				<p>公海领取的特殊约束：</p>
				<p>1)用户A领取的公海客户，由A释放后当天，不允许A领取；2)用户A领取的公海客户，在系统自动回归当天，不允许A领取。</p>
				<br/>
				
				<p>每用户可领取公海客户上限</p>
				<el-row>
					<el-col :span="24">
						<el-form-item label="数量：" prop="iwLimit" @input="handleInput">
							<el-input clearable v-model="ruleForm.iwLimit"></el-input>
							<span>个</span>
						</el-form-item>
					</el-col>
				</el-row>
				<p>说明：限制领取数量，提高跟进有效性</p>
				<br/>
				
				<p>公海管理员客户权限范围(不选择部门则显示全部客户)</p>
				<el-row>
					<el-col :span="24">
					<!-- @change="handleCheckedCitiesChange" -->
						<el-checkbox-group v-model="checkedCities1" :min="1">
    						<el-checkbox @change="handleCheckedCitiesChange2" v-for="dept in depts" :label="dept.id" :key="dept.id">{{dept.name}}</el-checkbox>
  						</el-checkbox-group>
					</el-col>
				</el-row>
				<br/>

				<!-- <p>公海管理员</p> -->
				<br/>
				<p>公海用户</p>
				<el-row>
					<el-col :span="24">
						<el-checkbox-group v-model="checkedCities2" :min="1">
    						<el-checkbox @change="handleCheckedCitiesChange2" v-for="user in users" :label="user.ID" :key="user.ID">{{user.name}}</el-checkbox>
  						</el-checkbox-group>
					</el-col>
				</el-row>			
			</el-form> 
			
			<div slot="footer" class="dialog-footer">
				<el-row>
				<el-col :span="12">
					<el-button type="primary"  @click="submitForm('ruleForm')">保存</el-button>
				</el-col>
				</el-row>
				</div>
			
		</el-dialog>
		
		<!-- 获客表格 -->
		<template>
		  <el-table border :data="tableData3" tooltip-effect="dark" style="width: 100%"  @row-click="getDetails">
			<el-table-column type="selection" width="55" align="center"></el-table-column>
			<el-table-column prop="ID" label="ID" width="60" align="center"></el-table-column>
			<el-table-column prop="gaName" label="客户名称" align="center"></el-table-column>
			<el-table-column prop="gaTel" label="移动电话" align="center"></el-table-column>
			<el-table-column prop="uId" label="所有者" align="center"></el-table-column>
			<el-table-column prop="gaCreate" label="创建日期" align="center"></el-table-column>
			<el-table-column prop="gaUpdate" label="更新日期" align="center"></el-table-column>
			<el-table-column prop="gaDistribut" label="状态" align="center"></el-table-column>
			<el-table-column fixed="right" width="80" label="操作" align="center">
			  <template slot-scope="scope">
			  <el-tooltip content="Bottom center" placement="bottom">
					<div slot="content">转普通</div>
					<i class="el-icon-upload2" style="font-size: 17px;"  @click="updateCust(scope.row.ID)"></i>
				</el-tooltip>
				<el-tooltip content="Bottom center" placement="bottom">
					<div slot="content">分配所有者</div>								
					<i class="el-icon-edit" @click="updateClick(scope.row.ID)" style="font-size: 17px;"></i>
				</el-tooltip>
			  </template>
			</el-table-column>
		  </el-table>
		  <div style="margin-top: 20px">
			<el-button @click="toggleSelection()">取消选择</el-button>
		  </div>
		</template>
		
		<!-- 分配所有者 -->
		<el-dialog title="分配所有者" :visible.sync="dialogDistrict">
			<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" >
				<el-row>
					<el-col :span="12">
						<el-form-item  label="客户名称">
						<el-input :disabled="true" v-model="ruleForm2.name"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="移动电话" prop="phone">
						<el-input clearable v-model="ruleForm2.phone"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="12">
						<el-form-item label="所有者" prop="counterpart" required>
							<el-select v-model="ruleForm2.counterpart" @clear="uitemvto()" clearable reserve-keyword placeholder="请输入关键词" :remote-method="uidremoteMethod" :loading="uidloading">
								<i slot="prefix" class="el-input__icon el-icon-search"></i>
								<el-option  v-for="item in uitemv" :key="item.value" :label="item.label" :value="item.value"> 
							</el-option>
							</el-select>
					</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="创建日期" prop="addtime">
						<el-input :disabled="true" clearable v-model="ruleForm2.addtime"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="12">
						<el-form-item label="更新日期" prop="updatetime">
						<el-input :disabled="true" clearable v-model="ruleForm2.updatetime"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="状态" prop="status">
						<el-input :disabled="true" clearable v-model="ruleForm2.status"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-row>
				<el-col :span="12">
					<el-button type="primary"  @click="onSubmitupdate()">保存</el-button>
				</el-col>
				<el-col :span="4">
					<el-button @click="dialogDistrict = false">取 消</el-button>
				</el-col>
				</el-row>
			</div>
		</el-dialog>
		
			<!-- 分页 -->
			<div class="block" style="display: block; float: left; margin-left: 400px;">
                  <el-pagination @current-change="handleCurrentChange" :page-size="pagedata.pageSize" background layout="total,prev, pager, next, jumper" :total="pagedata.total">
                  </el-pagination>
                </div>
		</div>
		
		
		<script type="text/javascript">
			var userna=${username};//用户姓名
			var deptna=${deptname};//部门名称
			//var update;//转换时间
			var Main = {
				data() {
					function isvalidPhone(str) {
						const reg = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
						return reg.test(str);
					}
					//时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
					function dateFormat() {
						var date = new Date();
						  var seperator1 = "-";
						  var year = date.getFullYear();
						  var month = date.getMonth() + 1;
						  var strDate = date.getDate();
						  if (month >= 1 && month <= 9) {
						    month = "0" + month;
						  }
						  if (strDate >= 0 && strDate <= 9) {
						    strDate = "0" + strDate;
						  }
						  var update = year + seperator1 + month + seperator1 + strDate;
						  console.log("转换时间："+update);
					    return update;
					};
					//检查输入是否为数字,是否为空  
				      var checkSoltMoney = (rule, value, callback) => {
				          setTimeout(() => {
				        	 if(value==null||value==''){
				        		 callback(new Error('不能为空'));
				        	 }
				        	 if (!isvalidPhone(value)) {
				     			callback(new Error('请输入正确的数值'));
				        	 }
				            /* if (!Number.isInteger(value)) {
				              callback(new Error('请输入数字值'));
				            }  */
				            else {
				                callback();
				            }
				          }, 1000);
				        };
				  return {
					  //搜索框中的数据
					  options3: [
					  		{
					        label: '全部数据',
					        options: [{
					        	label:'全部数据',
					        	value:'7878'
					        	}]						        		
					    	},{
					      label: '客户种类',
					      options: []
					    }],
						value7:'',
						input5:'',
						intern:[],//公海数据
						ruleForm: {
						  iwName: '',
						  iwBack: '',
						  iwHistory: '',
						  iwLimit: '',
						},
						rules1: {
							iwName: [
								{ required: true, message: '公海名称不能为空', trigger: 'blur' },
									{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
							  ],
						  iwBack:[
								{validator:checkSoltMoney, trigger: 'blur' },
							],
							iwHistory:[
								{
									validator:checkSoltMoney, trigger: 'blur' 
								}
							],
						  iwLimit:[
								{
									validator:checkSoltMoney, trigger: 'blur' 
								}
							],
							uitemv: [
					             { required: true, message: '所有者不能为空', trigger: 'blur' },
					          { required: true, message: '所有人不能为空', trigger: 'change' } 
					          ]
							},
							
						//编辑弹窗
						ruleForm2:{
							name:'',
							phone:'',
							counterpart: '',//所有者
							addtime:'',
							updatetime:dateFormat(),
							status:'',
						},
						rules2:'',
					  value:'',
					  item:'',
					  dialogFormVisible: false,
					  dialogDistrict:false,
					  tableData3:[],/*全部客户*/
					  pagedata:[],/*分页数据*/
					  //公海新建
					  users:userna,
					  checkedCities1:true,
					  checkedCities2:[1,2,3,4,5,6,8,9],
					  depts:deptna,
					  //定义两个变量
					  xx:'',
					  yy:'',
					  //保存公海客户的id信息
					  gatherid:'',
					  aa:'',//姓名
					  bb:'',//回款
					  cc:'',//历史
					  dd:'',//限制
					  //所有者搜索
					  uitemv:[],//所有者（客户经理）
						uosign:[],
						uosigns:[],
						osignloading: false,
						uosign1:[],
						uosigns1:[],
						osignloading1: false,
						uitemvs: [],
						uidloading: false,
						contactes: [],
					  }
					  },
					  created:function () {
							var _self = this;
							$.ajax({
			                      type: "post",
			                      url: "/customer/internationPage",
			                      data: {},
			                      success: function (sdata) {
			                    	  console.log("页数打印*****："+sdata);
			                    	  _self.tableData3=sdata.list;
			                          _self.pagedata=sdata;
			                      }
			                });
						},
			  methods: {
				  inputCustname(input5){
					  var _this=this;
						console.log("点击搜索："+_this.input5);
						axios.get('/customer/unameLike?input5='+(_this.input5),
								{arrayFormat: 'brackets'}
			           			//ajax请求成功的回调函数
			          			).then(function(response){					          				
			           			console.log("回调成功，获取了服务器端返回的值v");
			           			_this.tableData3=response.data.list;
			           			_this.pagedata=response.data;
			           		_this.restaurants=response.data;
			           	}).catch(function(){
			           		console.log("显示客户初始化数据出错了");
			           	});
				  },
				  //搜索框
				  //getValue(){},
				  //数字输入
				  handleInput(){},
				  //所有者搜索
				  uitemvto(){
					  	var _this=this;
					  	 _this.uitemv=_this.uitemvs;
					  },
					  //点击保存，修改公海客户
					  onSubmitupdate(){
						  var _this=this;
						  console.log("公海客户id："+_this.gatherid);
						  console.log("公海客户所有者："+_this.ruleForm2.counterpart);
						  console.log("公海客户时间："+_this.ruleForm2.updatetime);
						  axios.post('/customer/updateGather',
				           			//ajax请求成功的回调函数
								  Qs.stringify( {
							   			'gaId':_this.gatherid,'uid':_this.ruleForm2.counterpart,
							   			'updatetime':_this.ruleForm2.updatetime,
								   },{arrayFormat: 'brackets'})
								   ).then(function(response){	
								    console.log("公海客户id222："+_this.gatherid);
									console.log("公海客户所有者222："+_this.ruleForm2.counterpart);
									console.log("公海客户时间222："+_this.ruleForm2.updatetime);
				           			console.log("回调成功，获取了服务器端返回的值v");
				           			console.log("获取到了数据吗？"+response.data);					           		
				           		_this.restaurants=response.data;
				           		_this.$notify({
				           	          title: '修改成功',
				           	          type: 'success',
				           	       	  duration:2000
				           	        });
				           		showAtRight('/customer/internationalWaters');
				           	}).catch(function(){
				           		 _this.$notify({
				           	          title: '修改失败',
				           	          type: 'success',
				           	       	  duration:2000
				           	        }); 
				           		//showAtRight('/customer/internationalWaters');
				           	});	//这个是数据的初始化 
				           	_this.dialogDistrict=false;
							showAtRight('/customer/internationalWaters'); 
					  },
					//加载界面所有者
				      uidremoteMethod(query) {
						    var _this=this;
					        if (query !== '') {
					          this.uidloading = true;
					          setTimeout(() => {
					            this.uidloading = false;
					            this.uitemv = _this.uitemvs.filter(item => {
					              return item.label.toLowerCase()
					                .indexOf(query.toLowerCase()) > -1;
					            });
					          }, 200);
					        } else {
					          this.uosign = [];
					        }
					      },
					    //加载联系人
						   osignremoteMethod(query) {
							   var _this=this;
						        if (query !== '') {
						          this.osignloading = true;
						          setTimeout(() => {
						            this.osignloading = false;
						            this.uosign = _this.uosigns.filter(item => {
						              return item.label.toLowerCase()
						                .indexOf(query.toLowerCase()) > -1;
						            });
						          }, 200);
						        } else {
						          this.uosign = [];
						        }
						      },
				  /*公海分页*/
					handleCurrentChange(page){
						var _self=this;
						console.log("页数打印："+page);
		                $.ajax({
		                      type: "post",
		                      url: "/customer/internationPage",
		                      data: {pageNum:page,pageSize:5},
		                      success: function (sdata) {
		                    	  console.log("页数打印*****："+sdata);
		                    	  _self.tableData3=sdata.list;
		                          _self.pagedata=sdata;
		                      }
		                });
					},
					//获取表格里面的数据
					getDetails(row){
						var _this=this;
				        console.log(row);//此时就能拿到整行的信息
				        console.log("所有者姓名："+row.uId);
				        _this.gatherid=row.ID;
				        _this.ruleForm2.name=row.gaName;
				        _this.ruleForm2.phone=row.gaTel;
				        _this.ruleForm2.counterpart=row.uId;
				        _this.ruleForm2.addtime=row.gaCreate;
				        //this.ruleForm2.updatetime=dateFormat();
				        _this.ruleForm2.status=row.gaDistribut;
				      },
					//编辑所有者
					updateClick(){
				    	  var _this=this;
				    	  this.dialogDistrict=true;
				    	  axios.post("/sales/prosale/addOrderpage",
							  		//参数转换
							  		//ajax请求成功的回调函数
							  		).then(function(v){					          				
							  		console.log("回调成功，获取了服务器端返回的值v");
							  		console.log(v.data.contact);
							  		//将数据装换成界面显示
									_this.uosigns= v.data.contact.map(item => {
								        return { value: item.ID, label: item.name };
								      });
									_this.uosign=_this.uosigns;
									_this.uosigns1= v.data.contact.map(item => {
								        return { value: item.ID, label: item.name };
								      });
									_this.contactes=v.data.contact;
									_this.uitemvs= v.data.userAll.map(item => {
								        return { value: item.ID, label: item.name };
								      });
									_this.uitemv=_this.uitemvs;
									  _this.uosign1=_this.uosigns1;
									console.log(_this.uitemvs);
									_this.optionspay=v.data.opay;
									_this.options=v.data.otype;
									_this.ruleForm2.updatetime=dateFormat();
									//_this.ruleForm2.updatetime=_this.dateFormat;
									console.log("88888："+_this.ruleForm2.updatetime);
							  }).catch(function(){
							  	console.log("信息出错了");
							  });		
					},
				  //比较合同日和历史日
				  compare(){
					  this.xx=this.ruleForm.iwBack;
					  this.yy=this.ruleForm.iwHistory;
					  console.log("合同日111："+this.xx);
					  console.log("历史日111："+this.yy);
					  if(this.xx>this.yy){
						  console.log("该值符合条件");
					  }
					  else if(this.xx<this.yy){
						  alert("合同订单的值必须大于行动历史的值!");
					  };
				  },
				  handleCheckedCitiesChange2(value){
					  console.log("多选框的值部门222222222222："+this.checkedCities1);	
					  console.log("多选框的值员工222222222222："+this.checkedCities2);	
				  },
				  //转普通
				  updateCust(row){
					  var _this=this;
						//alert(row);
						console.log(row);
						 _this.id=row;
						axios.get("/customer/updateCust",
			           			//ajax请求成功的回调函数
			           			{params:{gaId:_this.id}
			           			}).then(function(response){					          				
			           			console.log("回调成功，获取了服务器端返回的值v");
			           			console.log(response);					           		
			           		_this.restaurants=response.data;
			           		_this.$notify({
			           	          title: '已成功转移到客户',
			           	          type: 'success',
			           	       	  duration:2000
			           	        });
			           		//showAtRight('/customer/customerInfo2');
			           	}).catch(function(){
			           		 _this.$notify({
			           	          title: '已成功转移到客户',
			           	          type: 'success',
			           	       	  duration:2000
			           	        }); 
			           		showAtRight('/customer/customerInfo2');
			           		//alert("转移失败！");
			           	});	//这个是数据的初始化 
						showAtRight('/customer/customerInfo2');
				  },
				  //添加公海信息
				  submitForm(formName){
					  var _this=this;
					  _this.dialogFormVisible=false;
					  /* this.$refs[formName].validate((valid) => {
						  if (valid) {
							  console.log('submit!');
							  console.log('submit!1111:'+_this.checkedCities1);
							  var xx=_this.checkedCities1;
							  console.log('这是我自己定义的xx:'+xx);
							  console.log('submit!2222:'+_this.checkedCities2);
							  var yy=_this.checkedCities2;
							  console.log('合同日：'+_this.ruleForm.iwBack);
							  console.log('历史日：'+_this.ruleForm.iwHistory);
							//post提交数据
							axios.post('/customer/newInter',
									//参数转换
									Qs.stringify({'iwName':_this.ruleForm.iwName,'iwBack':_this.ruleForm.iwBack,
													'iwHistory':_this.ruleForm.iwHistory,'iwLimit':_this.ruleForm.email,
													'deptid[]':xx,'userid[]':yy},
													{arrayFormat:'brackets'})
									//Qs.stringify(_this.ruleForm,{arrayFormat:'brackets'})
									//params:
										//ajax请求成功的回调函数
							).then(function(v){
								console.log("回调成功，获取了服务器端返回的值v");
								console.log(v);
								_this.dialogFormVisible=false;
								_this.$notify({
				           	          title: '添加成功',
				           	          type: 'success',
				           	       	  duration:3000
				           	        });
								showAtRight('/customer/internationalWaters');
							}).catch(function(){
								alert("出错了！");
							});
						  } else {
							console.log('error submit!!');
							return false;
						  }
						}); */
				  },
				  //公海弹窗
				  HighSeasParameter(){
					  var _this=this;
					  _this.dialogFormVisible = true;
					  axios.get("/customer/selectInter"
			           			).then(function(response){					          				
			           			console.log("回调成功，获取了服务器端返回的值v");
			           			console.log("这里有没有公海数据："+JSON.stringify(response.data.name));
			           			_this.ruleForm.iwName=response.data.name;
			           			console.log("这里有没有公海数据："+JSON.stringify(response.data.history));
			           			_this.ruleForm.iwHistory=response.data.history;
			           			console.log("这里有没有公海数据："+JSON.stringify(response.data.back));
			           			_this.ruleForm.iwBack=response.data.back;
			           			console.log("这里有没有公海数据："+JSON.stringify(response.data.limit));
			           			_this.ruleForm.iwLimit=response.data.limit;
			           			//console.log("这里有没有公海数据**："+_this.intern[1]);
			           		_this.restaurants=response.data;
			           		console.log("公海数据回显："+response.data);	
			           	}).catch(function(){
			           		console.log("回显");
			           	}); 
				  },
				  handleSelect(key, keyPath) {
				  console.log(key, keyPath);
				  if (key == 1) {
				  
				  }
				  },
				  toggleSelection(rows) {
					if (rows) {
					  rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					  });
					} else {
					  this.$refs.multipleTable.clearSelection();
					}
				  },
				  }
					  }
		  var Ctor = Vue.extend(Main);
		  new Ctor().$mount('#app');
		</script>
		
	</body>
</html>
